<script setup>
// 审核数据
import {onMounted, ref} from "vue";
import axios from "axios";
import {useRoute} from "vue-router";
import {ElMessage} from "element-plus";
import ReviewNotes from "@/views/ming/reviewNotes.vue";
import {router} from "@/router/index.js";

const reviewData = ref({})

// 处理通过操作
const handleApprove = () => {
  // 这里可以添加通过后的逻辑，如API调用等
  axios.put(`/audit/approved/${route.query.id}`).then(resp=>{
    ElMessage.success(resp.data)
    router.push("/audit")
  })
}
const visible=ref(false)
// 处理不通过操作
const handleReject = () => {
  // 这里可以添加不通过后的逻辑，如API调用等
  visible.value = true;
}
const route=useRoute();
const initData =()=>{
  axios.get(`/news/getNewsById/${route.query.id}`).then(resp=>{
    reviewData.value=resp.data;
    console.log(reviewData.value)
  })
}
const id=ref();
onMounted(()=>{
  initData();
  id.value=route.query.id;
})
const getVisible=(val)=>{
  visible.value=val;
}
</script>

<template>
  <div class="review-page">
    <!-- 页面标题 -->
    <h2 class="page-title">资讯审核</h2>

    <!-- 审核信息区域 -->
    <el-descriptions :column="3" border class="review-info">
      <el-descriptions-item label="来源">
        <el-tag type="info">{{ reviewData.source }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="作者">
        <span>{{ reviewData.author }}</span>
      </el-descriptions-item>
      <el-descriptions-item label="发布日期">
        <el-tag type="success">{{ reviewData.createTime }}</el-tag>
      </el-descriptions-item>
    </el-descriptions>

    <!-- 正文内容 -->
    <div class="content-container">
      <el-divider content-position="left"><h3>正文内容</h3></el-divider>
      <span>{{reviewData.content}}</span>
    </div>

    <!-- 底部按钮 -->
    <div class="button-container">
      <el-button type="primary" size="large" @click="handleApprove">通过</el-button>
      <el-button type="danger" size="large" @click="handleReject">不通过</el-button>
    </div>
  </div>

  <review-notes :visible="visible" @dialogVisible="getVisible" :id="id" />
</template>

<style scoped>
.review-page {
  max-width: 900px;
  margin: 0 auto;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.page-title {
  text-align: center;
  margin-bottom: 30px;
  color: #303133;
  font-size: 24px;
  font-weight: 500;
}

.review-info {
  margin-bottom: 30px;
  background-color: #f5f7fa;
  padding: 15px;
  border-radius: 4px;
}

.content-container {
  margin-bottom: 40px;
}

.content-text {
  line-height: 1.8;
  padding: 15px;
  background-color: #f8f9fa;
  border-radius: 4px;
  font-size: 15px;
}

.content-text h2 {
  font-size: 20px;
  color: #409eff;
  margin: 15px 0 10px;
}

.content-text h3 {
  font-size: 18px;
  color: #67c23a;
  margin: 12px 0 8px;
}

.button-container {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin-top: 40px;
}

.el-divider__text {
  font-size: 16px;
  color: #606266;
}
</style>